<!--
* @author: YX
* @description: 登录模板
* @createTime: 2023-11-10 15:28:59
 -->
<template>
	<view class="content">
		<view class="text_body">
			<text class="text1"><image :src="logoUrl"></image></text>
			<text class="text4">船岸一体化智能管理平台</text>
		</view>
		<view class="from">
			<view class="_input">
				<input type="text" placeholder="请输入您注册邮箱" placeholder-class="_pl" />
			</view>
			<view class="_input">
				<input type="text" placeholder="请输入您的登录密码" placeholder-class="_pl" />
			</view>

			<button class="login">登录</button>

		</view>
		<view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" :checked="isShow" color="#128df7" style="transform:scale(0.7)" />
					<text>我已阅读并同意<text style="color:#128df7;">《用户协议》</text>和<text
							style="color:#128df7;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoUrl:"http://110.42.252.108:10003/semmsapp/images/logo.png",
				//用户登录类型
				adminType: 'login',
				//是否同意用户隐私政策协议
				isShow: false,
				//验证码倒计时
				second: 0,
				showText: false
			}
		},
		methods: {
			/** 
			@method 用户隐私框
			**/
			checkbox(e) {
				console.log(e);
			},
			/**
			@method 保存密码到本地,读取则放在onShow函数使用uni.getStorageSync()读取本地账号密码
			**/
			user(e) {
				e.detail.value.length > 0 ? uni.setStorageSync('key', '存储的账号密码数据源') : uni.removeStorage({
					key: '要删除的数据源key'
				});
			},
			/**
			@method 验证码开始倒计时 setTimeout设置到时时间1000 == 1秒
			**/
			start() {
				this.second = 10;
				this.showText = true;
				var interval = setInterval(() => {
					--this.second
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.showText = false;
				}, 10000);
			}
		}
	}
</script>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	//是否刘海屏
	.content {
		width: 100%;
		.text_body {
			width: 100%;
			padding-bottom: 130rpx;
			background-color: rgba(18, 141, 247, 1);

			text {
				font-size: 45rpx;
				font-weight: bold;
				display: block;
				color: #fff;
			}

			.text1 {
				uni-image{    width: 244px;
    height: 76px;}
			}

			.text4 {
				margin-top: 10rpx;
				    text-align: center;
			}
		}

		.from {
			width: 80%;
			margin: 0px auto;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-top: 200rpx;
			margin-top: -80rpx;
			background-color: #fff;
		}

		._b {
			width: 70%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		._input {
			width: 100%;
			height: 80rpx;
			margin: 0px auto;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 30rpx;
			border: 1px solid #dadbde;

			input {
				width: 75%;
				height: 80rpx;
				padding-left: 40rpx;
				// border:1px solid red;
			}

			._pl {
				font-size: 28rpx;
			}

			.sms {
				font-size: 28rpx;
				white-space: nowrap;
				color: rgba(18, 141, 247, 1);
				margin-right: 25rpx;
				background-color: transparent;
				border: none;
			}
		}

		.login {
			width: 100%;
			height: 85rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			margin: 0px auto;
			outline: none;
			background-color: rgba(18, 141, 247, 1);
			color: #fff;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 40rpx;
			color: rgba(18, 141, 247, 1);
			text-decoration: underline;
		}

		._check {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			text {
				font-size: 28rpx;
			}
		}

		._f {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			text {
				display: flex;
				align-items: center;
				display: inline;
				margin: 0;
				font-size: 28rpx;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>